<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>随笔博客</title>
	<link rel="stylesheet" type="text/css" href="x_bs/css/bootstrap.min.css">
	<style type="text/css">
		body{
			margin:0;
			padding: 0;
			color:black;
		}
		.bgppage{
			background: #F6F6F6
		}
		.head-list{
			float: right;
			padding: 5px;
		}
		input{
			height: 35px;
			border:1px solid pink;
			border-radius: 5px;
		}
		.btn{
			position: relative;
			top: -2px;
		}
		.userpage{
			background: #96B97D;
			padding:0;
		}
		textarea{
			margin: 0px;
			width: 422px; 
			height: 113px;
			resize: none; 
			border:1px solid pink; 
			border-radius: 5px; 
		}
		.bloglist{
			border: 1px solid pink;
		}
		#support-yes{
			color: pink
		}
		#support-no{
			color: black
		}
	</style>
</head>
<body>
	<div class="container bgppage">
		<div class="container">
			<span class="h1">随笔博客</span>
			<span class="head-list">
				<span><a href="http://localhost:8989/chat?user=<%=user%>">聊天室</a></span>
				<span>
					<input type="text" id="findblog" placeholder="请输入关键字查找博客">
					<button class="btn btn-primary" onclick="findblog()">查找</button>
				</span>
			</span>
		</div>
		<div class="container">
			<div class="userpage container col-xs-3">
				<% if(user){ %>
					<p>欢迎<span><%=user %></span>登陆</p>
					<button class="btn btn-primary" onclick="bowOut()">退出账号</button>
					<button class="btn btn-danger" onclick="logOut()">注销账号</button>
					<h4>个人文章</h4>
					<div id="ownmsglise"></div>
				<% }else{ %>
					<a href="http://localhost:8989/log" style="display:inline-block;margin: 0 30%">请登录</a>
				<% } %>
			</div>
			<div class="container col-xs-9">
				<div>
					<input type="text" id="blogtitle" placeholder="一个响亮的题目"><br>
					<textarea id="blogmsg" placeholder="留下你的足迹"></textarea>
					<br>
					<button class="btn btn-primary" onclick="sendblog()">发布</button>
				</div>
				<div  id="findblogseach">
					<% for(let i in r){ %>
						<div class="bloglist">
							<p id='<%=r[i]._id%>'><%=r[i].title%></p>
							<p>作者：<%=r[i].user%></p>
							<span><%=r[i].msg%></span>
							<p id="fun">
								<span class="glyphicon glyphicon-thumbs-up" onclick="sendsupport()" id="support-no">点赞</span>
								<span class="glyphicon glyphicon-comment" onclick="senddiscuss()">评论</span>
							</p>
							<p>
								<% for(let j in r[i].discuss){ %>
									<span>
										<%=r[i].discuss[j].name%>		
									</span>：
									<span>
										<%=r[i].discuss[j].msg%>	
									</span><br>
								<% } %>
							</p>
						</div>
					<% } %>
					
				</div>
				<div>
					<button onclick="loadmore()">加载更多</button>
				</div>
			</div>
		</div>
	</div>
	
</body>

<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		$(window).resize(function(){
		})
		page()

	})
	var num=0;
	function page(){
		//主页面
		$.ajax({
			url:"http://localhost:8989/",
			data:{
				user:<%=user%>,
				num:num
			},
			success:function(res){
				console.log(<%=user%>,<%=r.length%>)
				
			}
		})
		//博客页面，更多刷新
		$.ajax({
			url:"http://localhost:8989/page",
			data:{
				user:<%=user%>
			},
			success:function(res){
				
			}
		})
		//当前用户博客列表
		$.ajax({
			url:"http://localhost:8989/pagelist",
			data:{
				user:<%=user%>
			},
			success:function(res){
				console.log(res)
				for(let i in res){
					$("#ownmsglise").append(`
						<p>${parseInt(i)+1}. ${res[i].title}</p>
					`)
				}
			}
		})
		//点赞状态刷新
		$.ajax({
			url:"http://localhost:8989/pagesup",
			data:{
				user:<%=user%>
			},
			success:function(res){
				//console.log(res,<%=user%>)
				for(let i in res){
					for(j in res[i].support){
						if(res[i].support[j]==<%=user%>){
							console.log($(`#${res[i]._id}`).siblings()[2].children[0].id="support-yes")

						}
					}
				}
			}
		})
	}
	//加载更多
	function loadmore() {
		num++;
		$.ajax({
			url:"http://localhost:8989/page",
			data:{
				num:num
			},
			success:function(res){
				console.log(<%=flag%>,res)
				if (res.r.length==0) {
					alert('没有更多')
				}
				for(let i in res.r){
					$("#findblogseach").append(`
						<div class="bloglist">
							<p id='${res.r[i]._id}'>${res.r[i].title}</p>
							<p>作者：${res.r[i].user}</p>
							<span>${res.r[i].msg}</span>
							<p id="fun">
								<span class="glyphicon glyphicon-thumbs-up" onclick="sendsupport()" id="">点赞</span>
								<span class="glyphicon glyphicon-comment" onclick="senddiscuss()">评论</span>
							</p>
							<p id="a${i}">
								
							</p>
						</div>
					`)
					for(let j in res.r[i].discuss){
						$(`#a${i}`).append(`
							<span>
								${res.r[i].discuss[j].name}	
							</span>：
							<span>
								${res.r[i].discuss[j].msg}
							</span><br>
						`)
					}
				}
			}
		})
	}
	//发布博客
	function sendblog(){
		var blogtitle=$('#blogtitle').val();
		var blogmsg=$('#blogmsg').val();
		if(<%=user%>){
			if(blogtitle!=""&&blogmsg!=""){
				$.ajax({
					url:"http://localhost:8989/sendblog",
					data:{
						user:<%=user%>,
						title:blogtitle,
						msg:blogmsg
					},
					success:function(res){
						console.log('登录',res)
						location.reload()
					}
				})
			}else{
				alert('题目和博客内容不能为空')
			}
		}else{
			alert('未登录，无法发送博客哦')
		}
	}
	//查找微博
	function findblog() {
		var blogmsg=$('#blogmsg').val();
		$.ajax({
			url:"http://localhost:8989/findblog",
			data:{
				user:<%=user%>,
				msg:$("#findblog").val()
			},
			success:function(res){
				console.log('查找微博',res.r)
				$("#findblogseach").html("")
				for(let i in res.r){
					$("#findblogseach").append(`
						<p id='${res.r[i]._id}'>${res.r[i].title}</p>
						<p>作者：${res.r[i].user}</p>
						<span>${res.r[i].msg}</span>
					`)
				}
			}
		})
	}
	//退出账号
	function bowOut(){
		$.ajax({
			url:"http://localhost:8989/bowOut",
			data:{

			},
			success:function(res){
				console.log('退出',<%=user=0%>,)
				location.href="http://localhost:8989/"
			}
		})
	}
	//注销账号
	function logOut() {
		$.ajax({
			url:"http://localhost:8989/logOut",
			data:{
				name:$('.userpage>p>span').html()
			},
			success:function(res){
				console.log('退出',<%=user=0%>)
				location.href="http://localhost:8989/"
			}
		})
	}
	//点赞
	function sendsupport() {
		console.log(event.target,$('.userpage>p>span').html())
		console.log(event.target.parentNode.parentNode.children[0])
		let title=event.target.parentNode.parentNode.children[0];
		let e=event.target
		$.ajax({
			url:"http://localhost:8989/sendsupport",
			data:{
				_id:title.id,
				user:$('.userpage>p>span').html(),
			},
			success:function(res){
				console.log(res)
				if(res.flag){
					e.id="support-yes"
					alert('点赞成功')
				}else{
					e.id="support-no"
					alert('取消点赞')
				}
				console.log(e)
				//location.reload()
					
			}
		})
	}
	//发送评论
	function senddiscuss(){
		console.log(event.target.parentNode.parentNode.children[0])
		console.log($(event.target.parentNode))
		$(event.target.parentNode).append(`
			<input type="text" name="discuss" placeholder="评论框">
			<button  onclick="discuss()">发送</button>
		`)
	}
	function discuss(){
		console.log(event.target.parentNode.parentNode.children[0])
		let title=event.target.parentNode.parentNode.children[0];
		console.log($("input[name=discuss]").val(),$('.userpage>p>span').html())
		$.ajax({
			url:"http://localhost:8989/senddiscuss",
			data:{
				_id:title.id,
				user:$('.userpage>p>span').html(),
				discuss:$('input[name=discuss]').val()
			},
			success:function(res){
				console.log(res)
				if(res=="您没有登陆"){
					alert(res)
				}else{
					alert('评论成功')
				}
				
				location.reload()
					
			}
		})
	}
</script>
</html>